import React, { useEffect, useState,useRef } from 'react';
import  './index.scss';
import Column from 'antd/es/table/Column';

export default function ContentCover(props) {
    const [childOneLeft, setChildOneLeft] = useState(200);

    const boxRef = useRef(null)
    const children = props.children
    // console.log('children', children);
    const handleDivider1Drag = e => {
        e.preventDefault(); // 在拖动过程中，鼠标会一直停留在 DOM 元素上，并保持可拖拽的光标
        // console.log('event',boxRef.current.getBoundingClientRect().left);
         const minWidth = 100;
         const MaxWidth = 450;
         let newWidth = e.clientX - boxRef.current.getBoundingClientRect().left;
         if(newWidth < minWidth){
            newWidth = minWidth
         }else if(newWidth> MaxWidth){
             newWidth = MaxWidth
         }
        setChildOneLeft(newWidth)
        // const minWidth = 200;
        // const maxWidth = childTwoLeft - minWidth;
        // let newPosition = e.clientX - boxRef.current.getBoundingClientRect().left;
        // console.log('newPosition',newPosition,);

        // if (newPosition < minWidth) {
        //     newPosition = minWidth;
        // } else if (newPosition > maxWidth) {
        //     newPosition = maxWidth;
        // }

        // setChildOneLeft(newPosition);
    };

    

    return (
        <div style={{ display: 'flex', height: '100%' }} ref={boxRef}>
            <div
                style={{
                    width: `${childOneLeft}px`,
                    height: '100%',
                }}
            >
                {children[0]||'左边的内容'}
            </div>
            <div
                className="splitLine"
                onMouseDown={() => {
                    document.addEventListener('mousemove', handleDivider1Drag);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', handleDivider1Drag);
                    });
                }}
            />
            
            <div style={{ flex: 1, height: '100%', overflow: 'auto' }}>{children[1]||右侧}</div>
        </div>
    );
}
